<template>
	<view class="install-container" style="margin-bottom: 30rpx;">

		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<!-- <uni-forms-item required label="检查地点：" name="检查点名称">
				<input maxlength="18" v-model="params['检查点名称']" placeholder="请输入检查地点" @input="binddata('检查点名称',$event.detail.value)" >
			</uni-forms-item> -->
			<uni-forms-item required label="协助类型:" name="assistType">
				<view :class="label == '请选择协助类型' ? 'color' : ''" class="tap" @click="handleTap('picker')">{{ label }}</view>
				<lb-picker ref="picker" v-model="params.assistType" @click="handleTap('picker')"
					@input="binddata('assistType', $event)" mode="selector" :list="assistTypeList"
					:dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>

			<!-- <uni-forms-item required label="协助单位:" name="assistOrgId">
				<view :class="label1 == '请选择协助单位' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}</view>
				<lb-picker ref="picker1" @click="handleTap('picker1')"   mode="selector" :list="unitList" :dataset="{ name: 'label1' }"
				 @confirm="handleConfirm1" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item> -->
			<uni-forms-item required name="assistId" label="协助人员:">
				<song-data-picker :bigText="true" :noPadding="true" placeholder="请选择处理人员" :showArrow="false" :border="false"
					ref="songPicker" :localdata="operatorList" popup-title="请选择" :openSearch="true" @change="onChange"
					@nodeclick="onnodeclick"></song-data-picker>
				<!-- <view :class="label2 == '请选择协助人员' ? 'color':''" class="tap" @click="handleTap('picker2')">{{label2}}</view>
				<lb-picker ref="picker2" @click="handleTap('picker2')"  mode="selector" :list="workList" :dataset="{ name: 'label2' }"
				 @confirm="handleConfirm2" @cancel="handleCancel">
				</lb-picker> -->
			</uni-forms-item>
			<uni-forms-item required name="reason" label="协助原因">
				<uni-easyinput placeholder="请输入原因" type="textarea" v-model="params.reason"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<upload :boxWidth="200" :max="3" v-model="params.attachments" />
			</uni-forms-item>
			<button class="btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
import upload from '@/components/upload.vue'
import DatePicker from '@/myComponents/date-picker.vue'
import LbPicker from '@/components/lb-picker/index.vue'
import dayjs from 'dayjs'
export default {
	components: {
		LbPicker,
		DatePicker,
		upload
	},
	data() {
		return {
			unitList: [],
			operatorList: [],
			assistTypeList: this.$type.assistTypeList,
			label: '请选择协助类型',
			label1: '请选择协助单位',
			label2: '请选择协助人员',
			params: {
				id: null,
				assistId: null,
				assistOrgId: null,
				assistType: null,
				reason: '',
				attachments: []
			},
			params1: {
				projectIds: null,
				pagination: {
					current: 1,
					pageSize: 100
				},
				sorter: {
					field: "id",
					order: 0
				}
			},
			params2: {
				项目id: null,
				三认领职位: null,
				pagination: {
					current: 1,
					pageSize: 100
				},
				sorter: {
					field: "id",
					order: 0
				}
			},
			//表单验证规则
			rules: {
				assistType: {
					rules: [{
						required: true,
						errorMessage: '请选择协助类型',
					}]
				},
				assistId: {
					rules: [{
						required: true,
						errorMessage: '请选择协助人',
					}]
				},
				reason: {
					rules: [{
						required: true,
						errorMessage: '请填写协助原因',
					}]
				}
			}
		}
	},
	onReady() {
		// 需要在onReady中设置规则
		this.$refs.form.setRules(this.rules)
	},
	onLoad(options) {
		console.log(options)
		this.params.id = +options.id
		this.params1.projectIds = [+options.projId]
		this.params2.项目id = +options.projId
		// this.getUnitList()
	},
	onShow() {
		this.getOrgTree()
	},
	methods: {
		getOrgTree() {
			this.$http2.post('/ticketSystem/ticket/orgtree', this.params).then(res => {
				if (res.code === 10000) {
					console.log(res)
				}
			})
		},
		getMemberList() {
			this.$http2.post('/party/member/list', this.params2).then(res => {
				if (res.code === 10000) {
					res.data.list = res.data.list || []
					res.data.list.forEach(item => {
						item.value = item.系统人员id
						item.text = item.人员姓名
					})
					this.operatorList = res.data.list
				}

			})
		},
		onChange(e) {
			this.params.assistId = e.detail.value[0]
		},
		getOperatorList() {
			this.$http2.post('/sys/user/list', this.params1).then(res => {
				// console.log(res, '处理人员')
				if (res.code === 10000) {
					if (res.data.list !== null) {
						res.data.list.forEach(item => {
							item.value = item.id
							item.text = item.name
						})
						// this.operatorList = res.data.list.filter(item => {
						// 	return item.id !== this.接单人id
						// })
					}
					this.operatorList = res.data.list
				}
			})
		},
		assistTicket() {

		},
		binddata(name, value) {
			// 通过 input 事件设置表单指定 name 的值
			this.$refs.form.setValue(name, value)
		},

		handleTap(name) {
			this.$refs[name].show()
		},
		handleConfirm(e) {
			if (e) {
				const name = e.dataset.name
				const label = e.item.label
				this.label1 = '请选择协助单位'
				this.label2 = '请选择协助人员'
				// this.workList = []
				if (label === '物业管家') {
					this.getOperatorList()
				} else if (['居民管家', '党组织'].includes(label)) {
					this.params2.三认领职位 = e.value === 2 ? 2 : 1
					this.getMemberList()
				} else if (label === '业委会') {
					let p = {
						status: 1,
						projectId: this.params2.项目id,
						"pagination": {
							"current": 1,
							"pageSize": 100
						},
						"sorter": {
							"field": "id",
							"order": 0
						}
					}
					this.$api2.getCommitteeAccountList(p).then(res => {
						if (res.data) {
							this.operatorList = res.data.list || [];
							this.operatorList.forEach(e => {
								e.value = e.userAccountName;
								e.text = e.userAccountId;
							})
						}
					});
				}

				// this.params4.education = e.item.id
				if (name && label) {
					this[name] = label
				}
			}
		},
		handleConfirm1(e) {
			if (e) {
				const name = e.dataset.name
				const label = e.item.label
				this.params2.单位id = e.item.单位id
				this.label2 = '请选择协助人员'
				this.getWorkerList()
				// this.params4.education = e.item.id
				if (name && label) {
					this[name] = label
				}
			}
		},
		handleConfirm2(e) {
			if (e) {
				const name = e.dataset.name
				const label = e.item.label
				// console.log(e.item)
				this.params.assistId = e.item.id
				this.binddata('assistId', e.item.id)
				// this.params4.education = e.item.id
				if (name && label) {
					this[name] = label
				}
			}
		},
		submitForm(form) {
			// 手动提交表单
			this.$refs.form.submit().then(res => {

				console.log('表单数据信息：', res);
				this.askHelp(Object.assign(this.params, res))
			}).catch(err => {
				console.log('表单错误信息：', err);
				uni.showToast({
					icon: 'none',
					title: "表单字段填写错误，请检查"
				})
			})
		},
		askHelp(params) {
			uni.showLoading({
				mask: true
			})
			this.$http2.post('ticketSystem/ticket/assist', params).then(res => {
				console.log(res)
				if (res.code === 10000) {
					// uni.navigateBack({
					// 	delta: 1
					// })
					uni.redirectTo({
						url: '../acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回工单首页'
					})
					// uni.showToast({
					// 	title: '申请协助成功'
					// })
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.install-container {
	// height: 100vh;
	background-color: #F8F8F8;
	// padding-bottom: 100rpx;
}

.color {
	color: #808080;
}

.tap {
	display: flex;
	align-items: center;
}

.btn {
	margin-top: 160rpx;
	width: 568rpx;
	height: 80rpx;
	// position: fixed;
	bottom: 0;
	line-height: 80rpx;
	margin-left: 80rpx;
	// margin-top: 160rpx;
	background: linear-gradient(to right, #3350D9, #1152FC);
	// background-color: #1152FC;
	color: #fff;
}
</style>
